<template>
  <!-- 整体页面 -->
  <a-layout style="min-height: 100vh">
    <!-- 左侧侧栏 -->
    <a-layout-sider v-model:collapsed="collapsed" collapsible>
      <div class="logo" style="padding: 20px;">
        <img src="@/assets/feiyuan.jpg" style="width: 100%;" />
      </div>
      <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
        <a-menu-item key="1" @click=" router.push('/dish');">
          <pie-chart-outlined />
          <span @click=" router.push('/dish');">菜品管理</span>
        </a-menu-item>
        <a-menu-item key="2" @click=" router.push('/table');">
          <snippets-outlined />
          <span @click=" router.push('/table');">桌位预定</span>
        </a-menu-item>

        <!-- <a-menu-item key="2">
          <smile-outlined />
          <span @click="showRouter = false"> 父子组件切换页面</span>
        </a-menu-item> -->

        <a-menu-item key="3" @click=" router.push('/card');">
          <smile-outlined />
          <span @click=" router.push('/card');"> 路由切换页面</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>

    <!-- 右侧页面 -->
    <a-layout>
      <!-- 右侧头部 -->
      <a-layout-header class="header">
        <div class="user-info" v-if="getUserName()">
          <span style="font-size: 23px;"> 当前用户：{{ getUserName() }} </span>
        </div>
      </a-layout-header>

      <!-- 右侧主要内容 -->
      <a-layout-content style="margin: 0 16px">
        <!-- 显示子路由 -->
        <router-view :key="$route.fullPath"></router-view>
        <!-- <PCCard v-else></PCCard> -->
      </a-layout-content>

      <!-- 右侧底部 -->
      <a-layout-footer style="text-align: center">
        copyright © 2008-2023 粤ICP备10066694号 版权所有：广州市飞元信息科技有限公司
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
import { getUserName } from '@/base/constant';
import { SmileOutlined, PieChartOutlined,SnippetsOutlined  } from '@ant-design/icons-vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

const collapsed = ref<boolean>(false);
const selectedKeys = ref<string[]>(['1']);


</script>


<style scoped>
.header {
  background: linear-gradient(to right, white, rgb(117, 128, 205), #4384df);
  padding: 0 !important;
  display: flex;
  margin-bottom: 5px;
  height: 75px;

  span {
    font-size: 30px;
    font-weight: 700;
    font-family: 楷体;
    margin-top: 5px;
  }

}

.user-info {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  padding-right: 20px;
}
</style>